<template>
  <div class="checkbox-table">
    <!-- <p>表单填写设置</p> -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="field" width="180" />
      <el-table-column label="是否显示" align="center">
        <template #default="{ row }">
          <el-checkbox v-model="row.show" @change="() => $emit('update:tableData', tableData)" />
        </template>
      </el-table-column>
      <el-table-column label="是否必填" align="center">
        <template #default="{ row }">
          <el-checkbox
            v-model="row.required"
            @change="() => $emit('update:tableData', tableData)"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps(['formDataEdit'])
const tableData = ref([
  { field: '邮箱', show: false, required: false },
  { field: '邮编', show: false, required: false },
  { field: '门牌号/建筑物名', show: false, required: false },
  { field: 'Whatsapp', show: false, required: false },
  { field: 'Line', show: false, required: false }
])
watch(
  () => props.formDataEdit,
  (newVal) => {
    tableData.value?.map((item, index) => {
      switch (item.field) {
        case '邮箱':
          item.show = newVal.emailShow == 1 ? true : false
          item.required = newVal.emailFlag == 1 ? true : false
          break
        case '邮编':
          item.show = newVal.zipCodeShow == 1 ? true : false
          item.required = newVal.zipCodeFlag == 1 ? true : false
          break
        case '门牌号/建筑物名':
          item.show = newVal.houseNumberShow == 1 ? true : false
          item.required = newVal.houseNumberFlag == 1 ? true : false
          break
        case 'Whatsapp':
          item.show = newVal.whatsappShow == 1 ? true : false
          item.required = newVal.whatsappFlag == 1 ? true : false
          break
        case 'Line':
          item.show = newVal.lineShow == 1 ? true : false
          item.required = newVal.lineFlag == 1 ? true : false
          break
      }
    })
  },
  { deep: true }
)
</script>

<style scoped>
.checkbox-table {
  /* padding: 20px; */
}

.el-table {
  /* margin-top: 20px; */
}

/* 调整复选框居中 */
:deep(.el-table .cell) {
  text-align: center;
}

/* 表头样式 */
:deep(.el-table__header-wrapper) th {
  background-color: #f5f7fa;
}
</style>
